{extend name="base" /}
{block name='content'}
<blockquote class="layui-elem-quote">角色列表</blockquote>
    <div class="layui-card">
      <div class="layui-card-header" style="padding: 15px;">
        <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" id="add">添加角色</a> 
      </div>
        <div class="layui-card-body">
          <form class="layui-form">
          <table class="layui-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>角色名称</th>
                <th>角色描述</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr> 
            </thead>
            <tbody>
              {foreach $list as $vo}
              <tr>
                <td>{$vo.id}</td>
                <td>{$vo.name}</td>
                <td>{$vo.remark}</td>
                <td>
                  {empty name='$vo.status'}
                    <span class="layui-font-red">禁用</span>
                  {else/}  
                    <span class="layui-font-green">启用</span>
                  {/empty}
                </td>
                <td>{$vo.create_time}</td>
                <td>{$vo.update_time}</td>
                <td>
                  {empty name='$vo.status'}
                    <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-green switch" data-status="1" data-id="{$vo.id}">启用</a>
                  {else/}  
                    <a class="layui-btn layui-btn-sm layui-btn-primary layui-border-red switch" data-status="0" data-id="{$vo.id}">禁用</a>
                  {/empty}
                  <a class="layui-btn layui-btn-sm layui-btn-warm permission" data-id="{$vo.id}">权限</a>
                  <a class="layui-btn layui-btn-sm edit" data-id="{$vo.id}">编辑</a>
                  <a class="layui-btn layui-btn-sm layui-btn-danger del"  data-id="{$vo.id}">删除</a>
                </td>
              </tr>
              {/foreach}
            </tbody>
          </table>
        </form>
        </div>
    </div>
    <script>
      layui.use(['layer','form'], function(){
         var form = layui.form,layer = layui.layer,$ = layui.jquery;
         $('#add').click(function(){
             layer.open({
             title:['添加角色'],  
             type:2,
             area:['500px','600px'],
             content: '/admin/role/create',
           })
         });
   
         $('.edit').click(function(){
            let id = $(this).attr('data-id');
             layer.open({
             title:['编辑角色'],  
             type:2,
             area:['500px','600px'],
             content: '/admin/role/edit?id='+id,
           })
         })
   
         $('.permission').click(function(){
            let id = $(this).attr('data-id');
             layer.open({
             title:['编辑角色'],  
             type:2,
             area:['400px','500px'],
             content: '/admin/role/permission?role_id='+id,
           })
         })
   
         $('.switch').on('click',function(){
          let status = $(this).attr('data-status'), id = $(this).attr('data-id');
          $.post('/admin/role/switch',{status:status,id:id},function(res){
                if(res.code == 1){
                  layer.msg(res.msg,{icon:1});
                  parent.$.pjax.reload('#main',{fragment: '#main'});
                  return false;
                }

                layer.msg(res.msg,{icon:2});
          });

        });
   
         $('.del').on('click',function(){
           let that = $(this);
           let id = that.attr('data-id');
   
           layer.confirm('您确定要删除吗？', {
                 btn: ['确定','取消'] 
           }, function(){
                 $.get('/admin/role/delete?id='+id,function(res){
                     if(res.code == 1){
                             layer.msg(res.msg,{icon:1});
                             that.parents('tr').remove();
                             return false;
                           }
   
                       layer.msg(res.msg,{icon:2});
                 });
             });
         });
         
        
   });              
   </script>    
{/block}